<template>
  <Model-bg
    title="品质信息"
    :width="476"
    :height="302"
    :top="15"
    router="/srceen/quality-index"
  >
    <div class="q-box f f-jc-b f-ai-c">
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="q-item f-1 f-col f-ai-c f-jc-b"
      >
        <div class="q-text font16 f-col f-ai-c">
          <div>{{ item.label }}</div>
          <span>{{ item.ratio }}PPM</span>
        </div>
        <div class="q-chart" :id="`quality${index}`"></div>
        <div class="q-text font16 f-col f-ai-c">
          <div>目标</div>
          <span>{{ item.target }}PPM</span>
        </div>
      </div>
    </div>
  </Model-bg>
</template>
<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { screenQuality } from "@/api/srceen/home";
export default {
  data() {
    return {
      dataList: [
        {
          label: "上月客诉率",
          ratio: 0,
          name: "本月",
          value: 0,
          target: 0,
        },
        {
          label: "上周客诉率",
          ratio: 0,
          name: "本周",
          value: 0,
          target: 0,
        },
        {
          label: "昨日客诉率",
          ratio: 0,
          name: "今日",
          value: 0,
          target: 0,
        },
      ],
    };
  },
  computed: {
    ...mapState({
      refresh: (state) => state.app.refresh,
    }),
  },
  watch: {
    refresh() {
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取图表数据
    getList() {
      screenQuality().then((res) => {
        if (res.data) {
          res.data.forEach((i, index) => {
            this.dataList[index].ratio = i.lastTime;
            this.dataList[index].value = i.thisTime;
            this.dataList[index].target = i.target;
            this.initChart(this.dataList[index], index);
          });
        }
      });
    },
    // 绘制图表
    initChart(item, index) {
      let domid = document.getElementById("quality" + index);
      if (domid?.hasAttribute("_echarts_instance_"))
        domid.removeAttribute("_echarts_instance_");

      let myChart = echarts.init(domid);
      let option = {
        series: [
          {
            name: item.name,
            type: "gauge",
            center: ["50%", "60%"],
            radius: "90%",
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: 100,
            title: {
              offsetCenter: [0, "-10%"],
              textStyle: {
                fontSize: 16,
                color: "#fff",
              },
            },
            detail: {
              valueAnimation: true,
              formatter: `${item.value}PPM`,
              color: "#3fd7f6",
              fontSize: 16,
              offsetCenter: [0, "50%"],
            },
            progress: {
              show: true,
              width: 8,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#1890FF" },
                  { offset: 1, color: "#3fd7f6" },
                ]),
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 8,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: [
              {
                value: parseInt((item.value / item.target) * 100),
                name: item.name,
              },
            ],
          },
        ],
      };
      myChart.setOption(option, true, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.q-box {
  height: 100%;
  .q-item {
    height: 100%;
    .q-text {
      color: #fff;
      letter-spacing: 1px;
      font-weight: bold;
      span {
        color: #3fd7f6;
      }
    }
    .q-chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
